<template>
  <van-collapse-item title="会议结算" name="meetingPrice">
    <van-notice-bar
      color="#1989fa"
      background="#ecf9ff"
      :text="`预算小计：￥${getPrice(price.budgetFee)}，结算小计：￥${getPrice(price.actualFee)}`"
    />
    <div class="meeging_price_explain">
      <p>请根据<span class="text-danger">实际发生的费用</span>填写结算金额，费用结算流程如下：</p>
      <p>1：正确填写<span class="text-danger">实际金额</span>，并上传<span class="text-danger">发票和水单</span>，确保<span class="text-danger">水单金额、发票金额、实际金额</span>一致，否则不予结算。</p>
      <p>2：会务组根据填写的收款账号及费用信息在<span class="text-danger">2</span>个工作日内，联系收款方并支付款项。</p>
    </div>

    <meeting-price-add ref="refMeetingPriceAdd" @update="meetingPriceUpdate"></meeting-price-add>
  </van-collapse-item>
</template>

<script setup>
import MeetingPriceAdd from './meeting-price-add.vue'
import useClipboard from 'vue-clipboard3'
import { reactive, toRefs, ref } from 'vue'
import { showSuccessToast, showToast } from 'vant';
import useUtils from '@/hooks/useUtils'

const { toClipboard } = useClipboard()
const { getPrice } = useUtils();

const props = defineProps({
  speakerList: {
    type: Array,
    default: () => ([])
  }
})

const refMeetingPriceAdd = ref();
const price = reactive({
  budgetFee: 0,
  actualFee: 0
})

function meetingPriceUpdate (newVal) {
  let [beforePrice, afterPrice] = [0, 0];
  newVal.forEach(item => {
    beforePrice += Number.parseFloat(item.fee || 0)
    afterPrice += Number.parseFloat(item.actualFee || 0)
  })

  price.budgetFee = beforePrice;
  price.actualFee = afterPrice;
}

defineExpose({
  getParams: () => refMeetingPriceAdd.value?.getParams(),
  setParams (detail) {
    refMeetingPriceAdd.value?.setParams(detail)
  }
})
</script>